require("../css/player.less")
require('../fonts/iconfont.css')
document.ready(function () {

    // 服务器地址
    const BASR_URL = 'http://139.9.177.51:8099'

    // 获取本地数据
    let fragments = JSON.parse(window.localStorage.getItem('fragments'))
    /* 获取dom */
    const sumPart = document.querySelector('#sumPart') // 总小节
    const curPart = document.querySelector('#curPart') // 当前小结
    const curTitle = document.querySelector('#curTitle') // 当前小结
    const video = document.querySelector('#video') // 视频标签
    const preBtn = document.querySelector('#preBtn') // 上一节
    const nextBtn = document.querySelector('#nextBtn') // 下一节
    const stopBtn = document.querySelector('#stopBtn') // 暂停
    const stopMask = document.querySelector('#stopMask') // 暂停蒙层
    const continueBtn = document.querySelector('#continueBtn') // 继续按钮
    const overBtn = document.querySelector('#overBtn') // 结束按钮
    const curImg = document.querySelector('#curImg') // 当前图片
    const maskCurTitle = document.querySelector('#maskCurTitle') // 当前蒙层标题
    const progress = document.querySelector('#progress') // 进度条

    // 渲染总小节
    sumPart.textContent = fragments.length;


    /* 播放视频函数 */
    let index = 0;
    let spendTime = [] // 练习时间

    /* 监听视频播放结束事件 */
    video.addEventListener('ended', function () {
        index += 1; // 索引 + 1   播放下一个 
        if (index > fragments.length - 1) {
            stopMask.style.display = 'block' // 显示蒙层
            curImg.src = BASR_URL + fragments[index - 1].imgUrl; // 当前图片
            maskCurTitle.textContent = fragments[index - 1].title; // 当前图片
            clearInterval(intervalId) // 清除进度条计时器
            return
        }
        play() // 重新调用播放方法
    })

    function play() {
        video.src = BASR_URL + fragments[index].videoUrl // 加载播放视频地址

        curPart.textContent = index + 1; // 当前小节
        curTitle.textContent = fragments[index].title; // 当前标题

        setTimeout(function () {
            video.play() // 开始播放
            calcProgress() // 计算进度条
        }, 20)
    }

    play() // 调用播放视频的函数

    /* 进度条 */
    let intervalId = null;

    function calcProgress() {
        intervalId = setInterval(function () {
            /* 
              当前时间 / 总时间 = 当前宽度 / 总宽度
              推算：  当前宽度 = 总宽度 * （ 当前时间 / 总时间 ）
            */
            let curWith = document.body.offsetWidth * (video.currentTime / video.duration) // 计算宽度

            spendTime[index] = video.currentTime // 当前时间

            // 设置进度条的宽度
            progress.style.width = curWith + 'px'
        }, 30)
    }

    /* 上一节 */
    preBtn.addEventListener('click', function () {
        index -= 1;
        if (index < 0) {
            index = 0
        }
        play()
    })

    /* 下一节 */
    nextBtn.addEventListener('click', function () {
        index += 1;
        if (index > fragments.length - 1) {
            index = fragments.length - 1
        }
        play()
    })

    /* 暂停 */
    stopBtn.addEventListener('click', function () {
        video.pause() // 暂停
        stopMask.style.display = 'block' // 显示蒙层

        curImg.src = BASR_URL + fragments[index].imgUrl; // 当前图片
        maskCurTitle.textContent = fragments[index].title; // 当前图片

        clearInterval(intervalId) // 清除进度条计时器
    })

    /* 继续 */
    continueBtn.addEventListener('click', function () {
        video.play() // 播放
        calcProgress() // 计算进度条
        stopMask.style.display = 'none' // 关闭蒙层
    })

    /* 结束 */
    overBtn.addEventListener('click', function () {
        // 计算时间总和
        let total = 0;
        for (let i = 0; i < spendTime.length; i++) {
            total += spendTime[i]
        }

        // 计算
        let params = {
            id: location.search.split('=')[1], // 课程的id
            userId: parseInt(window.localStorage.getItem('userId')), // 用户的id
            takeTime: total, // 训练的时间
            calorie: total * 1.3, // 消耗的卡路里
        }


        // 发送ajax
        window.$http.post('sports/saveTrain', params, function (res) {
            if (res.status === 0) {
                window.utils.showTost('succ', '保存训练数据成功', 2000)
                setTimeout(function () {
                    window.location.href = "./course.html" // 跳转到课程列表
                }, 2000)
            }
        })
    })

})